<script setup>
import { ref, onMounted } from 'vue'
import { getCategoriesAPI, getArticleListAPI } from '../../../apis/apis';
import { useRouter } from 'vue-router';

// 文章列表
const tableData = ref([])
// 选择的日期范围
const dateRange = ref(["", ""])
// 当前页
const current = ref(1)
// 数据总条数
const total = ref(0)
// 输入框输入的关键字
const keyword = ref('')
// 级联选择器 
const category = ref([""])
const customProps = ref({
  label: "name",
  value: "name",
  checkStrictly : true
})
// 分类选项
const options = ref([])
// 路由 跳转到编辑页
const router = useRouter()

// 条件查询
const search = async () => {
  const params = {
    current: 1,
    pageSize: 7,
    dateFrom: dateRange.value === null? "" : dateRange.value[0],
    dateTo: dateRange.value === null? "" : dateRange.value[1],
    category: category.value === null? "" : category.value[0],
    keyword: keyword.value
  }
  const res = await getArticleListAPI(params)
  total.value = res.data?.total
  tableData.value = res.data.pageList
}
// 获取分类信息
const getCategories = async () => {
  const res = await getCategoriesAPI()
  options.value = res.data
}
// 当前页改变
const pageChange = async (num) => {
  const params = {
    current: num,
    pageSize: 7,
    dateFrom: dateRange.value === null  ? "" : dateRange.value[0],
    dateTo: dateRange.value === null ? "" : dateRange.value[1],
    category: category.value === null ? "" : category.value[category.value.length-1],
    keyword: keyword.value
  }
  const res = await getArticleListAPI(params)
  // total.value = res.data.total 有bug, 点击最后一页时 请求两次并且跳转到第一页
  tableData.value = res.data.pageList
}
// 获取文章列表信息
const getArticleInfo = async (num, pageSize) => {
  const params = {
    current: num,
    pageSize: pageSize,
    dateFrom: dateRange.value === null ? "" : category.value[0],
    dateTo: dateRange.value === null ? "" : category.value[1],
    category: category.value === null ? "" : category.value[0],
    keyword: keyword.value
  }
  const res = await getArticleListAPI(params)
  total.value = res.data.total
  tableData.value = res.data.pageList
}
// 文章详情
const handleDetail = (index) => {
  // 携带文章id跳转到编辑页面 不可修改文章
  router.push({
    path: '/edit',
    query: {
      type: "preview",
      id: tableData.value[index]['articleId']
    }
  })

}
// 文章编辑
const handleEdit = (index) => {
  // 携带文章id跳转到编辑页面
  router.push({
    path: '/edit',
    query: {
      type: "editable",
      id: tableData.value[index]['articleId']
    }
  })
}

onMounted(() => {
  // 请求文章列表
  getArticleInfo(current.value, 7)
  // 请求分类列表
  getCategories()
})
</script>

<template>
  <div class="px-8 py-2 flex flex-col">
    <div class="flex py-3 px-1 items-center justify-between">
      <div class="flex items-center w-1/3 space-x-1 ml-10">
        <span class="text-gray-600 text-md px-1">选择日期 : </span>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
      </div>
      <div class="px-5 flex -ml-40 min-h-fit ">
        <el-cascader
          v-model="category"
          :options="options"
          :props="customProps"
          placeholder="选择分类"
          collapse-tags
          clearable
        >
          <template #default="{ node, data }">
            <span>{{ data.name }}</span>
          </template>
        </el-cascader>

      </div>
      <div class="flex w-2/6 mr-10 items-center">
        <el-input
          class="w-full"
          autofocus
          v-model="keyword"
          placeholder="输入关键字"
        ></el-input>
        <el-button
          class="mx-20 test"
          type="primary"
          @click="search"
        >查询</el-button>
      </div>
    </div>

    <el-table
      :data="tableData"
      size="large"
      highlight-current-row
      row-class-name="h-14 w-full text-sm"
      header-row-class-name="h-12 text-sm font-mono"
      table-layout="auto"
      show-overflow-tooltip
    >
      <el-table-column
        sortable
        prop="createTime"
        label="提交日期"
      />
      <el-table-column
        prop="title"
        label="标题"
      />
      <el-table-column
        prop="categoryName"
        label="分类"
      />
      <el-table-column
        prop="tagList"
        label="标签"
      >

        <template #default="scope">
          <el-tag
            class="mx-0.5"
            v-for="item in scope.row.tagList"
            type="success"
          >
            {{ item?.name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="count"
        label="字数"
      />
      <el-table-column
        prop="views"
        label="浏览数"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="180"
      >

        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="handleDetail(scope.$index)"
          >
            <div class="text-sm">
              详情
            </div>
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="handleEdit(scope.$index)"
          >
            <div class="text-sm">
              编辑
            </div>
          </el-button>

        </template>
      </el-table-column>

    </el-table>
    <div class="min-w-max">
      <RouterLink
      tag="a" target="_blank"
        to="/edit"
        class="flex items-center justify-center w-1/3 mx-auto mt-3 rounded-lg cursor-pointer"
        style="background-color:#409eff;"
      >
        <span class="font-semibold text-lg tracking-widest text-white">新增文章</span>
      </RouterLink>
      <div class="bg-white mt-4 py-2 flex items-center justify-center">
        <el-pagination
          :page-size="7"
          layout="prev, pager, next"
          v-model:current-page="current"
          :total="total"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>

    </div>


  </div>
</template>

<style
  scoped
  lang='scss'
></style>